import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import _Portal from "@mui/material/Portal";
import React, { memo, useMemo } from "react";
import styles from "./index.module.less";
import Mask from "../mask";
import images from "../../assets";
import Search from "../search";
import { debounceFn, walletRootRef } from "../../utils";
import useCallBackState from "../../hooks/useCallBackState";
import ScrollView from "../scroll-view";
import { useMaskOpen } from "../../hooks";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { LocalKeyMap } from "../../local";
import useServices from "../../hooks/useRequest";
import { useDispatch, useSelector } from "react-redux";
import { useMount } from "ahooks";
import { isDomesticVersion } from "../../config";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var WalletPortal = function(props) {
    return /*#__PURE__*/ _jsx(_Portal, _object_spread_props(_object_spread({}, props), {
        container: walletRootRef.current
    }));
};
var hotCountry = {
    key: "hotCountry",
    list: [
        {
            code: "+86",
            cn: "中国",
            en: "China"
        },
        {
            code: "+62",
            cn: "印度尼西亚",
            en: "Indonesia"
        },
        {
            code: "+1",
            cn: "美国",
            en: "America"
        },
        {
            code: "+65",
            cn: "新加坡",
            en: "Singapore"
        }
    ]
};
// String.prototype.startsWith = function (str) {
//   return this.substr(0, str.length) === str;
// };
var Component = function(props) {
    var handleClick = function handleClick(code) {
        onClick(code);
        onClose();
    };
    var open = props.open, onClose = props.onClose, onClick = props.onClick, inner = props.inner;
    var dispatch = useDispatch();
    var countryList = useSelector(function(rootState) {
        return rootState.app.areaCodes;
    });
    var services = useServices({
        getCountry: dispatch.app.getAreaCodes
    });
    var t = useTranslation().t;
    var _useCallBackState = _sliced_to_array(useCallBackState({
        value: "",
        filterList: []
    }), 2), state = _useCallBackState[0], setState = _useCallBackState[1];
    var allCountryList = useMemo(function() {
        if (!countryList.length) return [];
        return countryList.reduce(function(pre, cur) {
            return pre.concat(cur.list);
        }, []);
    }, [
        countryList.length
    ]);
    var handleChange = debounceFn(function(value) {
        var filterList = allCountryList.filter(function(i) {
            return i.en.toLowerCase().startsWith(value.toLowerCase()) || i.code.includes(value) || i.cn.includes(value);
        });
        setState({
            value: value,
            filterList: filterList
        });
    });
    useMount(function() {
        if (!countryList.length) {
            services.getCountry().catch(function(err) {
                console.log(err);
            });
        }
    });
    useMaskOpen(open);
    var Container = inner ? WalletPortal : React.Fragment;
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsx(Mask, {
            open: open,
            className: classNames(inner ? styles.inner : ""),
            contentClassName: classNames(inner ? styles.inner_content : ""),
            children: /*#__PURE__*/ _jsxs("div", {
                className: classNames(styles.page, inner ? styles.inner_page : ""),
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: styles.header,
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: styles.header_top,
                                children: [
                                    /*#__PURE__*/ _jsx("div", {
                                        className: styles.header_title,
                                        children: t(LocalKeyMap["component.region.title"])
                                    }),
                                    /*#__PURE__*/ _jsx("img", {
                                        src: images.close,
                                        className: styles.close,
                                        onClick: function() {
                                            return onClose();
                                        }
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx(Search, {
                                onChange: handleChange,
                                maxlength: 20
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx(ScrollView, {
                        className: styles.content,
                        scrollY: true,
                        children: /*#__PURE__*/ _jsx("div", {
                            className: "",
                            children: state.value.trim().length === 0 ? [
                                hotCountry
                            ].concat(_to_consumable_array(countryList)).map(function(item, index) {
                                return /*#__PURE__*/ _jsxs("div", {
                                    children: [
                                        /*#__PURE__*/ _jsx("div", {
                                            className: styles.key,
                                            children: item.key === "hotCountry" ? t(LocalKeyMap.hotCountry) : item.key
                                        }),
                                        item.list.map(function(_i, _idx) {
                                            return /*#__PURE__*/ _jsxs("div", {
                                                className: styles.labelItem,
                                                onClick: function() {
                                                    return handleClick(_i.code);
                                                },
                                                children: [
                                                    /*#__PURE__*/ _jsx("div", {
                                                        className: styles.labelText,
                                                        children: _i[isDomesticVersion ? "cn" : "en"]
                                                    }),
                                                    /*#__PURE__*/ _jsx("div", {
                                                        className: "".concat(styles.labelText, " ").concat(styles.labelCode),
                                                        children: _i.code
                                                    })
                                                ]
                                            }, _idx);
                                        })
                                    ]
                                }, index);
                            }) : state.filterList.map(function(_filterItem, _filterIndex) {
                                return /*#__PURE__*/ _jsxs("div", {
                                    className: styles.labelItem,
                                    onClick: function() {
                                        return handleClick(_filterItem.code);
                                    },
                                    children: [
                                        /*#__PURE__*/ _jsx("div", {
                                            className: styles.labelText,
                                            children: _filterItem[isDomesticVersion ? "cn" : "en"]
                                        }),
                                        /*#__PURE__*/ _jsx("div", {
                                            className: styles.labelText,
                                            children: _filterItem.code
                                        })
                                    ]
                                }, _filterIndex);
                            })
                        })
                    })
                ]
            })
        })
    });
};
var RegionModal = /*#__PURE__*/ memo(Component);
export default RegionModal;

 //# sourceMappingURL=index.js.map